<template>
  <div class="app-container">
    <div class="filter-container">
      <selectServer @server-selected="handleSelectServer" />
      <!-- <el-date-picker v-model="searchForm.date" class="filter-item" type="date" style="width: 140px;" placeholder="离线日期"></el-date-picker> -->
      <el-select v-model="searchForm.days" class="filter-item" style="width: 110px;" clearable :loading="loading" placeholder="流失天数">
        <el-option v-for="(item, k) in days" :key="k" :label="item" :value="k"></el-option>
      </el-select>
      <el-select v-model="searchForm.type" class="filter-item" style="width: 110px;" clearable :loading="loading" placeholder="统计类型" @change="handleChange">
        <el-option v-for="(item, k) in types" :key="k" :label="item" :value="k"></el-option>
      </el-select>
      <el-button class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" :style="{height: '780px'}" class="mt-10" border height="780">
      <el-table-column :label="field_name" prop="field" width="150px" align="center"></el-table-column>
      <el-table-column label="人数" prop="num" width="80px" align="center"></el-table-column>
      <el-table-column label="占比" prop="ratio" width="80px" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getLossList } from '@/api/statis'
import checkPermission from '@/utils/permission'
import SelectServer from '@/components/SelectServer'

const days = {
  3: '3天',
  7: '7天',
  14: '14天',
  30: '30天'
}
const types = {
  'level': '角色等级',
  'real_recharge': '充值分布',
  // 'power': '战力分布',
  'main_task': '主线任务',
  'diamond': '剩余钻石',
  'explore_level_id': '海底关卡'
}
export default {
  name: 'LostList',
  components: { SelectServer },
  data() {
    return {
      permissionRoles: this.$store.state.user.permissionRoles,
      list: [],
      serverList: [],
      days: days,
      types: types,
      field_name: '角色等级',
      loading: false,
      listLoading: false,
      downloadLoading: false,
      searchForm: {
        days: '3',
        type: 'level',
        date: '',
        sid: []
      }
    }
  },
  created() {
  },
  methods: {
    checkPermission,
    handleFilter() {
      this.getList()
    },
    handleSelectServer(servers) {
      this.searchForm.servers = servers
    },
    handleChange(val) {
      this.type = this.types[val]
    },
    async getList() {
      this.listLoading = true
      const res = await getLossList(this.searchForm)
      this.field_name = types[this.searchForm.type]
      this.listLoading = false
      this.list = res.data
    }
  }
}
</script>
